<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
  	<title>Educar - Management</title>
  	<%@ include file="/WEB-INF/pages/dash/taglibs.jsp"%>
</head>

<body>

    <div id="wrapper">

        <!-- Navagation -->
        <jsp:include page="navigation.jsp" />
        
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Novo serviço</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <h1 style="float: left; position: relative; left: 160px; margin-bottom: 30px;">Obrigatórios</h1>
                    <h1 style="float: left; position: relative; left: 432px;">Complementares</h1>
                </div>
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                	<form action="${ctx}/dash/service/save" method="post">
	                	<div class="col-lg-6">
	                		<div class="panel panel-default">
		                        <div class="panel-heading">
		                            É através destes campos que seu futuro aluno te encontrará! Sabedoria!
		                        </div>
		                        <div class="panel-body">
		                        	<h1 style="text-align: center; margin-bottom: 35px;">Dados do serviço</h1>
		                        	<div class="form-group">
		                                <label>Título</label>
		                                <input class="form-control" name="title" id="title">
		                                <p class="help-block">Ex: Aula de violão</p>
		                            </div>
		                        	<div class="form-group">
		                                <label>Categoria</label>
		                                <select class="form-control" style="width: 100%; padding-right: 170px;" name="category" id="category">
		                                    <option>1</option>
		                                    <option>2</option>
		                                    <option>3</option>
		                                    <option>4</option>
		                                    <option>5</option>
		                                </select>
		                            </div>
		                            <div class="form-group">
		                                <label>Subcategoria</label>
		                                <select class="form-control" style="width: 100%; padding-right: 170px;" id="subcategory" name="subcategory">
		                                    <option>1</option>
		                                    <option>2</option>
		                                    <option>3</option>
		                                    <option>4</option>
		                                    <option>5</option>
		                                </select>
		                            </div>
		                            <div class="form-group">
		                                <label>Mini-descrição</label>
		                                <textarea class="form-control" rows="3" name="littleDescription" id="littleDescription"></textarea>
		                            </div>
		                            <div class="form-group">
		                                <label style="margin-right: 10px;">Tipo de aula: </label>
		                                <label class="radio-inline">
		                                    <input type="radio" name="classType" value="CLASS_TYPE_PARTICULAR">Particular
		                                </label>
		                                <label class="radio-inline">
		                                    <input type="radio" name="classType" value="CLASS_TYPE_GROUP">Em grupo
		                                </label>
		                                <label class="radio-inline">
		                                    <input type="radio" name="classType" value="CLASS_TYPE_BOUTH">Ambos
		                                </label>
		                            </div>
		                            <h1 style="text-align: center; margin-bottom: 35px; margin-top: 35px;">Dados de contato</h1>
		                            <div class="form-group">
		                                <label>Nome</label>
		                                <input class="form-control" name="name" id="name">
		                            </div>
		                            <div class="form-group" style="float: left;">
		                                <label>Email</label>
		                                <input class="form-control" style="width: 100%; padding-right: 60px;" name="email" id="email">
		                            </div>
		                            <div class="form-group" style="float: right;">
		                                <label>Telefone</label>
		                                <input class="form-control" style="width: 100%; padding-left: 60px;" name="phoneNumber" id="phoneNumber">
		                            </div>
		                            <div class="form-group">
		                                <label>Estado</label>
		                                <select class="form-control" style="width: 100%; padding-right: 170px;" name="state" id="state">
		                                    <option>1</option>
		                                    <option>2</option>
		                                    <option>3</option>
		                                    <option>4</option>
		                                    <option>5</option>
		                                </select>
		                            </div>
		                            <div class="form-group">
		                                <label>Cidade</label>
		                                <select class="form-control" style="width: 100%; padding-right: 170px;" name="city" id="city">
		                                    <option>1</option>
		                                    <option>2</option>
		                                    <option>3</option>
		                                    <option>4</option>
		                                    <option>5</option>
		                                </select>
		                            </div>
		                        </div>
		                    </div>
	                	</div>
	                	
	                	<div class="col-lg-6">
		                    <div class="panel panel-default" style="padding-bottom: 207px;">
		                        <div class="panel-heading" style="text-align: center;">
		                            Detalhe seu serviço! São os detalhes que fazem a diferença!
		                        </div>
		                        <div class="panel-body">
			                        <h1 style="text-align: center; margin-bottom: 35px;">Detalhes do serviço</h1>
		                       		<div class="form-group">
		                                <label style="margin-right: 10px;">Locomoção: </label>
		                                <label class="checkbox-inline">
		                                    <input type="checkbox">Vou até o aluno
		                                </label>
		                                <label class="checkbox-inline">
		                                    <input type="checkbox">O aluno vem até mim
		                                </label>
		                            </div>
		                            <div class="form-group">
		                                <label style="margin-right: 10px;">Tipo de ensino: </label>
		                                <label class="checkbox-inline">
		                                    <input type="checkbox">À distância
		                                </label>
		                                <label class="checkbox-inline">
		                                    <input type="checkbox">Presencial
		                                </label>
		                            </div>
		                            <div class="form-group">
		                                <label>Preço hora/aula</label>
		                                <input class="form-control" name="price" id="price">
		                            </div>
		                            <div class="form-group">
		                                <label>Descrição detalhada</label>
		                                <textarea class="form-control" rows="3" name="fullDescription" id="fullDescription"></textarea>
		                            </div>
		                            
		                        	<h1 style="text-align: center; margin-bottom: 35px; margin-top: 35px;">Detalhes de contato</h1>
		                        	<div class="form-group">
		                                <label>Endereço</label>
		                                <input class="form-control" name="address" id="address">
		                            </div>
		                            <div class="form-group" style="float: left;">
		                                <label>CEP</label>
		                                <input class="form-control" style="width: 100%; padding-right: 60px;" name="zipCode" id="zipCode">
		                            </div>
		                            <div class="form-group" style="float: right;">
		                                <label>Complemento</label>
		                                <input class="form-control" style="width: 100%; padding-left: 60px;" name="complement" id="complement">
		                            </div>
		                            <div class="form-group" style="float: left;">
		                                <label>Telefone 2</label>
		                                <input class="form-control" style="width: 100%; padding-right: 60px;" name="phoneNumber2" id="phoneNumber2">
		                            </div>
		                            <div class="form-group" style="float: right;">
		                                <label>Telefone 3</label>
		                                <input class="form-control" style="width: 100%; padding-left: 60px;" name="phoneNumber3" id="phoneNumber3">
		                            </div>
			                    </div>
		                	</div>
	                    </div>
	                    <div class="form-group">
		                	<button type="submit" class="btn btn-default" style="font-size: 35px;">Cadastrar!</button>
		                </div>
		            </form>
                </div>
            </div>
        </div>
    </div>
    
	<script type="text/javascript">
	
	$("#title").blur(function(){
	      if( !this.value ) {
	      	$(this).parent().removeClass('has-success').addClass('has-error');
	      } else {
	    	$(this).parent().removeClass('has-error').addClass('has-success');
	      }
	});
	
	$("#littleDescription").blur(function(){
	      if( !this.value ) {
	      	$(this).parent().removeClass('has-success').addClass('has-error');
	      } else {
	    	$(this).parent().removeClass('has-error').addClass('has-success');
	      }
	});
	
	$("#name").blur(function(){
	      if( !this.value ) {
	      	$(this).parent().removeClass('has-success').addClass('has-error');
	      } else {
	    	$(this).parent().removeClass('has-error').addClass('has-success');
	      }
	});
	
	$("#email").blur(function(){
		  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

	      if( !regex.test($(this).val()) ) {
	      	$(this).parent().removeClass('has-success').addClass('has-error');
	      } else {
	    	$(this).parent().removeClass('has-error').addClass('has-success');
	      }
	});
	
	$("#phoneNumber").blur(function(){
	      if( !this.value ) {
	      	$(this).parent().removeClass('has-success').addClass('has-error');
	      } else {
	    	$(this).parent().removeClass('has-error').addClass('has-success');
	      }
	});
	
	jQuery(function($){
		   $("#phoneNumber").mask("(99) 9999-9999");
		   $("#phoneNumber2").mask("(99) 9999-9999");
		   $("#phoneNumber3").mask("(99) 9999-9999");
		   $("#zipCode").mask("99999-999");
		});
	
	</script>
</body>
</html>
